<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "登录",
  },
}
</route>

<template>
  <view class="login-page">
    <view class="title">一键登录</view>

    <!-- 登录按钮，根据 agree 的值动态禁用 -->
    <button
      class="login-btn"
      open-type="getPhoneNumber"
      @getphonenumber="loginHandle"
      :disabled="!agree"
      :class="{ disabled: !agree }"
    >
      {{ inviteFlag ? "接受邀请" : "授权登录" }}
    </button>

    <view class="w-4/5 text-xs mt-2 m-auto">
      <checkbox-group @change="agreeChange">
        <label>
          <!-- 使用 v-model 来动态绑定 agree，checkbox 状态发生改变时，agree 会自动更新 -->
          <checkbox :checked="agree" value="agree" />点击代表您已理解并同意
          <text class="text-blue-500 mx-1" @tap="navigateToPrivacy"
            >《个人信息保护指引》</text
          >和<text class="text-blue-500 mx-1" @tap="navigateToAgreement"
            >《用户协议》</text
          >
        </label>
      </checkbox-group>
    </view>
    <button class="fixed bottom-20" @click="cancelLogin">取消登录</button>
  </view>
</template>

//
<script lang="ts" setup>
// import { checkUserPrivacyProtocol } from '@/utils/privacy'

import { httpWeChatLogin } from "@/service/login";
import { useUserStore } from "@/store";
import { tabbarStore } from "@/components/fg-tabbar/tabbar";
import { currRoute } from "@/utils";

const userStore = useUserStore();

const agree = ref<boolean>(false);
// const privacy = ref<boolean>(false)
const loading = ref<boolean>(false);

const navigateToPrivacy = () => {
  uni.navigateTo({
    url: "/pages-sub/privacyPolicy/index",
  });
};
const navigateToAgreement = () => {
  uni.navigateTo({
    url: "/pages-sub/agreement/index",
  });
};

const agreeChange = (e: UniHelper.CheckboxGroupChange) => {
  agree.value = e.detail.value.includes("agree"); // 根据是否存在 value 判断选中
};
// const privacyChange = (e1: boolean, e2: boolean) => {
//   privacy.value = e1
//   if (e2) {
//     loginHandle()
//   }
// }
// const login = () =>
//   checkUserPrivacyProtocol(
//     () => {
//       privacy.value = true
//     },
//     () => {
//       privacy.value = false
//       loginHandle()
//     },
//   )

let inviteFlag = ref<boolean>(false);

const cancelLogin = () => {
  uni.reLaunch({
    url: "/pages/home/index",
  });
};

onMounted(() => {
  const pathObj = currRoute();
  const { invite } = pathObj.query;
  if (invite) {
    inviteFlag.value = true;
  }
});
const loginHandle = (e) => {
  const pathObj = currRoute();
  loading.value = true;
  uni.getUserInfo({
    desc: "登录的数据",
    success() {
      uni.login({
        provider: "weixin",
        success: async (res) => {
          try {
            const params = {
              code: res.code,
              telGroup: JSON.stringify(e.detail),
            };
            const data: any = await httpWeChatLogin(params);
            const { account, access_token, user_id } = data?.data || {};
            userStore.setUserInfo({
              token: access_token,
              account,
              userId: user_id,
            });
            loading.value = false;

            tabbarStore.setCurIdx(2);

            let url = `/pages/my/index`;
            // if (pathObj.query.redirect && pathObj.query.id && pathObj.query.articleId) {
            //   url = `${pathObj.query.redirect}?id=${pathObj.query.id}&articleId=${pathObj.query.articleId}`
            //   uni.reLaunch({ url })
            //   return
            // }
            uni.reLaunch({
              url,
            });
          } catch (error) {
            uni.showToast({
              title: "登陆异常",
              icon: "none",
              mask: false,
            });
            loading.value = false;
          }
        },
        fail: () => {
          uni.showToast({
            title: "登陆失败",
            icon: "none",
            mask: false,
          });
        },
      });
    },
  });
};
// const linkTo = (e) => {
//   uni.navigateTo({ url: e === 1 ? '/pages/agree/index' : '/pages/privacy/index' })
// }

const decryptPhoneNumber = async (e) => {
  console.log(e);
  try {
    // const res = await
  } catch (error) {
    console.log(error, "error");
  }
};
</script>

<style lang="scss" scoped>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 300rpx;

  .login-img {
    width: 270rpx;
    height: 236rpx;
  }

  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 40rpx;
    color: #181818;
    line-height: 56rpx;
    text-align: left;
    font-style: normal;
    margin-top: 48rpx;
    margin-bottom: 480rpx;
  }

  .desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #9da1aa;
    line-height: 32rpx;
    text-align: left;
    font-style: normal;
    margin-top: 20rpx;
  }

  .login-btn {
    width: 80%;
    height: 104rpx;
    opacity: 1;
    border-radius: 274rpx;
    background: rgba(184, 240, 105, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 700;
    color: rgba(27, 27, 27, 1);
  }
  .login-btn.disabled {
    background: #d3d3d3; /* 禁用时的背景色 */
    color: #a1a1a1; /* 禁用时的文字颜色 */
    cursor: not-allowed; /* 禁用时鼠标样式 */
  }
}
</style>
